import React from 'react'
import {connect} from 'react-redux'
import { Row, Col, Timeline, message, Spin, Button } from 'antd';
import {messages, queryCurrencyPrecision} from "share/common";
import 'styles/loan-billing/view-line.scss'
import moment from "moment/moment";
import borrowService from "containers/loan-billing/borrow-and-return.service";
const TimelineItem = Timeline.Item;

class viewLine extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      recordInfo: {},
      loading: false,
      contractInfo: {}
    }
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.viewFrame === this.props.viewFrame){
      return -1;
    }
    if(!nextProps.viewFrame){
      this.setState({recordInfo: {}});
      return -1;
    }
    this.setState({loading: true});
    Promise.all([
      borrowService.getLineInfo(nextProps.viewId),
      borrowService.getLineDetail(nextProps.viewId)
    ]).then(res => {
      this.setState({recordInfo: res[1].data, loading: false, contractInfo: res[0].data});
    }).catch(() => {
      this.setState({loading: false});
      message.error(messages('loan-billing.key25')/*系统异常*/);
    });
  }

  render(){
    const { recordInfo, loading, contractInfo } = this.state;
    // https://pmo.mcd.com.cn/jira/browse/TES-2118 隐藏银行账号和收款方户号
    // const { info } = this.props;
    // let showPayeeAccountNumber = false // 是否展示收款方银行账户以及收款方户名
    // if (info && info.customFormValues && info.customFormValues.length > 0) {
    //   info.customFormValues.some((item) => {
    //     if (item.messageKey === 'cust_list') {
    //       if (item.value === '016') { // 不涉及政府官员,则不展示收款方银行账户和收款方户名
    //         showPayeeAccountNumber = false
    //       } else {
    //         showPayeeAccountNumber = true
    //       }
    //       return true
    //     }
    //   })
    // }
    return(
      <div className='view-line'>
      <Spin spinning={loading}>
        <div className='stroke-title'><span>{messages('common.baseInfo')/*基本信息*/}</span></div>
        <div>
          <Row>
            <Col span={4}>{messages('loan-billing.key12')/*借款类型*/}：</Col>
            <Col span={19} offset={1}>{recordInfo.loanTypeName}</Col>
          </Row>
          <Row>
            <Col span={4}>{messages('loan-billing.key68')/*收款方*/}：</Col>
            <Col span={19} offset={1}>
              <span className={recordInfo.payeeType === 1002 ? 'table-blue' : 'table-grey'} style={{padding: '3px 5px', marginRight: '10px'}}>{recordInfo.payeeType === 1002 ? messages('loan-billing.key14')/*员工*/ : messages('loan-billing.key15')/*供应商*/}</span>
              {recordInfo.payeeName}
            </Col>
          </Row>
          {/* https://pmo.mcd.com.cn/jira/browse/TES-2118 隐藏银行账号和收款方户号 */}
          {/* {showPayeeAccountNumber ? <Row>
            <Col span={4}>{'收款账号'}：</Col>
            <Col span={19} offset={1}>
              <div>账户：{recordInfo.payeeAccountNumber}</div>
              <div>户名：{recordInfo.payeeAccountName}</div>
            </Col>
          </Row> : null} */}
          <Row>
            <Col span={4}>{messages('loan-billing.key11')/*借款金额*/}：</Col>
            <Col span={19} offset={1}>{`${recordInfo.currencyCode}  ${this.filterMoney(recordInfo.amount,queryCurrencyPrecision(recordInfo.currencyCode), true)}`}</Col>
          </Row>
          {
            recordInfo.planedPaymentDate &&
            <Row>
              <Col span={4}>{messages('loan-billing.key109')/*计划付款日期*/}：</Col>
              <Col span={19} offset={1}>{recordInfo.planedPaymentDate ? moment(recordInfo.planedPaymentDate).format('YYYY-MM-DD') : '-'}</Col>
            </Row>
          }
          <Row>
            <Col span={4}>{messages('loan-billing.key148')/*预计还款日期*/}：</Col>
            <Col span={19} offset={1}>{recordInfo.planedRepaymentDate ? moment(recordInfo.planedRepaymentDate).format('YYYY-MM-DD') : '-'}</Col>
          </Row>
          <Row>
            <Col span={4}>{messages('common.loan.reason')/*借款原因*/}：</Col>
            <Col span={19} offset={1}>{recordInfo.remark}</Col>
          </Row>
        </div>
        {recordInfo.refApplicationBusinessCode && (
          <div>
            <div className='stroke-title'><span>{messages('loan-billing.key64')/*申请单信息*/}</span></div>
            <Row>
              <Col span={4}>{messages('loan-billing.key71')/*关联申请单*/}：</Col>
              <Col span={19} offset={1}>{`${recordInfo.refApplicationBusinessCode}  ${contractInfo.refApplicationFormName}`}</Col>
            </Row>
          </div>
        )}
        {contractInfo.contractAssociatedDTO && (
          <div>
            <div className='stroke-title'><span>{messages('loan-billing.key149')/*合同信息*/}</span></div>
            <Row>
              <Col span={4}>{messages('loan-billing.key106')/*关联合同*/}：</Col>
              <Col span={19} offset={1} style={{fontWeight: '900'}}>
                {`${contractInfo.contractAssociatedDTO.contractNumber}   ${contractInfo.contractAssociatedDTO.contractName}`}
              </Col>
            </Row>
            <Row>
              <Col span={10} offset={5}>{messages('loan-billing.key150')/*计划付款行号*/}：{contractInfo.contractAssociatedDTO.lineNumber}</Col>
              <Col span={9}>{messages('loan-billing.key109')/*计划付款日期*/}：{moment(contractInfo.contractAssociatedDTO.dueDate).format('YYYY-MM-DD')}</Col>
            </Row>
            <Row>
              <Col span={19} offset={5}>{messages('loan-billing.key151')/*合同行金额*/}：
                {`${contractInfo.contractAssociatedDTO.currency} ${this.filterMoney(contractInfo.contractAssociatedDTO.amount,queryCurrencyPrecision(contractInfo.contractAssociatedDTO.currency),true)}`}</Col>
            </Row>
          </div>
        )}
        {contractInfo.transactionDetailDTOList && contractInfo.transactionDetailDTOList.length > 0 && (
          <div>
            <div className='stroke-title'><span>{messages('loan-billing.key152')/*付款信息*/}</span></div>
            {contractInfo.transactionDetailDTOList.map(item => {
                  return <Row>
                  <Col span={8}>{`${item.curreny} ${this.filterMoney(item.amount,queryCurrencyPrecision(item.curreny), true)}`}</Col>
                  <Col span={6}>{moment(item.payDate).format('YYYY-MM-DD')}</Col>
                  <Col span={10}>{messages('common.currency.rate')/*汇率*/}{item.exchangeRate}</Col>
                </Row>
            })}
          </div>
        )}
      </Spin>
        <div className="slide-footer">
          <Button onClick={this.props.close}>{messages('common.back')/*返回*/}</Button>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {

  }
}

export default connect(mapStateToProps)(viewLine);
